<template>
  <div>
    <div class="top-title">
      <span class="title">总榜排行</span><span class="title-comment">推荐</span>
      <router-link to="/Classify">
      <span class="title">全部分类</span>
      </router-link>
    </div>
    <div class="wrapper" >
        <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img  class="swiper-picture" src="../../../assets/picture/2.jpg" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        loop: 'true'
      },
      swiperList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
      },
      {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
      },
      {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
      }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .wrapper >>> .swiper-pagination-bullet // 组件间样式穿透
     background: #fff
  .top-title
    text-align:center
    padding:.15rem
    .title
     height:100%
     margin:.8rem
    .title-comment
     font-size: 20px
     color:pink
  .wrapper
    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 57%
    .swiper-picture
     width:100%
</style>
